<template>
  <div class="set">
    <!-- 标题 -->
    <van-nav-bar @click-left="$router.back()" border>
      <template #left>
        <van-icon name="arrow-left" class="m_fs18" color="#333"/>
      </template>
      <template #title>
        <div class="title m_fs18 m_fw">更换手机号</div>
      </template>
    </van-nav-bar>

    <!-- 说明 -->
    <div class="prompt m_fs14">
      更换手机号，下次登录使用新的手机号登录，当前绑定手机号为 {{tel}}
    </div>

    <!-- 账号验证表单 -->
    <form class="form" @submit.prevent="onSubmit">
      <van-field v-model="phone" type="tel" label="手机号" center  placeholder="请输入手机号"/>
      <van-field v-model="code" center label="验证码" placeholder="请输入验证码">
        <template #button>
          <div class="tip m_fs14" :class="timer?'tip2':''" @click="sendCode">{{tip}}</div>
        </template>
      </van-field>
      <div class="confirm_box m_tac">
        <van-button class="confirm_btn" :disabled="code<0" color="#008080" round>确定</van-button>
      </div>
    </form>
  </div>
</template>

<script>
import {mapState, mapGetters, mapMutations} from 'vuex'
export default {
  name:'ChangePhone',
  data(){
    return{
      tip: '发送验证码',
      code: '',
      yzm: '',
      phone: '',
      count: 60,
      timer: null,
    }
  },
  computed: {
    ...mapState('m_user', ['userinfo']),
    ...mapGetters('m_user', ['tel'])
  },
  methods: {
    ...mapMutations('m_user',['setUserinfo']),
    // 提交表单
    onSubmit(){
      if(this.phone==this.userinfo.phone) return this.$toast('手机号不变')
      if(this.code != this.yzm) return this.$toast('验证码错误')
      this.axios.post('update/phone',{
        phone: this.phone,
        code: this.code
      }).then(res=>{
        // console.log(res)
        if(res.code==0){
          this.userinfo.phone = res.dt
          this.setUserinfo(this.userinfo)
          this.$router.go(-1)
          this.$toast('更换成功')
        }else{
          this.$toast('更换失败，手机号或验证码错误')
        }
      })
    },
    // 发送验证码
    sendCode(){
      if(this.phone.length===0) return this.$toast('请先输入手机号')
      if(!/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(this.phone))
        return this.$toast('手机号错误')
      if(this.timer) return
      this.countdown()
      this.axios.post('api/code',{
        phone: this.phone,
      }).then(res=>{
        if(res.code===0){
          this.code = res.yzm
          this.yzm = res.yzm
        }else{
          this.$toast('发送验证码失败')
        }
      })
    },
    // 倒计时
    countdown(){
      this.tip = `重新发送(${this.count}s)`
      this.timer = setInterval(() => {
        this.count--
        this.tip = `重新发送(${this.count}s)`
        if(this.count==-1){
          this.tip = '发送验证码'
          this.count = 60
          clearInterval(this.timer)
          this.timer = null
        }
      }, 1000);
    },
  }
}
</script>

<style lang="scss" scoped>
.set{
  height: 100vh;
  background: #f7f7f7;
  .prompt{
    padding: 20px;
    color: #666;
  }
  .form{
    .van-field{ height: 50px;}
    .confirm_box{
      margin-top: 20px;
      .confirm_btn{ width: 140px;}
    }
    .tip{
      color: #008080;
      &.tip2{ color: #bfbfbf;}
    }
  }
}
</style>